import React, { Component } from 'react';
import "../Add/notes.css";
import { ActivityIndicator } from 'antd-mobile'

class Changepic extends Component {
    constructor(props) {
        super(props);
        this.state={
            userid: localStorage.getItem("userid"),
            src:'111'
        }
    }
    render(props) {
        return (
            <div>
                {/* 头，包括返回，发布 */}
                <div style={{
                    width:'100%',
                    height:'50px',
                    borderBottom:'1px solid #778899',
                    textAlign:'center'
                }}>
                    <i  className='iconfont iconfanhui' style={{
                         fontSize:'30px',
                         float:'left',
                         margin:'10px' 
                    }} onClick={() => this.props.history.goBack()}></i> 
                    <div style={{display:'inline-block',
                         margin:'20px'}}>更改头像</div>
                    <div style={{float:'right',
                         margin:'20px',
                         fontSize:'20px'}}
                         onClick= {this.articleszeng}>完成</div>                       
                </div>
                <form>
                   <div className="file">
                         <span>上传图片</span>
                         <input type="file"  id="file" 
                         className="upload" accept="image/*" onChange={(e)=>this.changepic(e)}/>   
                    </div>
                    <div id='show'></div>
                </form>
            </div>
        )
    }
    changepic(e) {
        var reads = new FileReader();
        var f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            document.getElementById('show').innerHTML=" <img id='img' src='"+this.result+"' ></img>"
        };  
    }
	articleszeng = () => {
		document.getElementById('img')?this.state.src=document.getElementById('img').src:this.state.src='333'
        //console.log(this.state)
        //this.props.history.goBack()
		fetch('http://62.234.30.197:8088/user/changepic', {
			method: 'post',
            body: JSON.stringify({
				'pic':`${this.state.src}`,
				'userid':`${this.state.userid}`,
			}),
			headers: {
			    "Access-Control-Allow-Origin":"*",
			    'content-type': 'application/json'
			},
			mode: 'cors'
		})
		.then(res=>res.json())
		.then(res=> {
			//console.log(res)
        })
        this.props.history.push('/Mymsg')
	}
}

export default Changepic